import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);

export default function PieChartComponent() {
    const chartRef = useRef(null);

    useEffect(() => {
        if (chartRef.current) {
            var myChart = echarts.init(chartRef.current);
            var option = {
                tooltip: { trigger: 'item' },
                legend: { top: '5%', left: 'center' },
                series: [{
                    // name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
                    label: { show: false, position: 'center' },
                    emphasis: { label: { show: true, fontSize: 40, fontWeight: 'bold' } },
                    labelLine: { show: false },
                    data: [
                        { value: 100, name: '50岁以下'},
                        { value: 240, name: '50-60岁'},
                        { value: 120, name: '60-70岁'},
                        { value: 120, name: '70-80岁'},
                        { value: 340, name: '80岁以上'}
                    ]
                }]
            };
            option && myChart.setOption(option);
        }
    }, []);

    return <div ref={chartRef} style={{ width: '100%', height: '400px' }}></div>;
}